<!--表格卡片-->
<template>
    <div class="cards">
      <div class="card" v-for="(item,index) in mainWorkList" :key="index" @click="details(type,item)">
        <header class="card-header">
          <div class="theTitle">
            <span class="theSerialNumber">{{ index + 1 }}</span>
            <span class="title" :style="{color:item.finishTime < theCurrentTime ? 'red' : ''}" v-if="type === 'unfinishedList' || type === 'listHasBeenCompleted'">{{ item.matterDescription }}</span>
            <span class="title" v-else>{{ item.matterDescription }}</span>
            <span class="icon"><img src="@/assets/static/image/thePartyBranch321/youjiantou@2x.png" alt="右箭头"></span>
          </div>
        </header>
        <main class="card-main">
          <div class="item">
            <div class="item-title">工作子项</div>
            <div class="item-keywords">{{ item.subWorkDescriptions | getSubWorkDescription }}</div>
          </div>
          <div class="line"></div>
          <div class="item">
            <div class="item-title">落实责任人</div>
            <div class="item-keywords">{{ item.userName | temporarilyNoData }}</div>
          </div>
          <div class="line"></div>
          <div class="item">
            <div class="item-title">细化说明</div>
            <div class="item-keywords">{{ item.detailedDescriptions | temporarilyNoData }}</div>
          </div>
          <div class="line"></div>
          <div class="item">
            <div class="item-title">“三会一课” 检索关键词</div>
            <div class="item-keywords">{{ item.sanKeKeywords | temporarilyNoData }}</div>
          </div>
        </main>
        <footer class="branchCard-footer" v-if="type === 'unfinishedList' || type === 'listHasBeenCompleted'">
          <span class="options"><span>工作特性:</span><span>{{ item.workType | jobCharacteristics }}</span></span>
          <div class="line"></div>
          <span class="options"><span>计划完成时间:</span><span>{{ item.finishTime | captureTheDate }}</span></span>
        </footer>
        <footer class="card-footer" v-else>
          <span class="options">
            <span>状态:</span>
            <span class="state state-red" v-if="type === 'theAffiliatedPartyUnfinishedList' || type === 'cityCompanyUnfinishedList'">待处理</span>
            <span class="state" :class="[item.workStatus === '未下发' || item.workStatus === '未分派' ? 'state-red' : 'state-green',]" v-else>{{ item.workStatus }}</span>
          </span>
          <div class="line"></div>
          <span class="options"><span>工作特性:</span><span>{{ item.workType | jobCharacteristics }}</span></span>
          <div class="line"></div>
          <span class="options"><span>下发时间:</span><span>{{ item.issuedTime | captureTheDate }}</span></span>
        </footer>
      </div>
      <div class="noData" v-show="noData">
        <img src="@/assets/static/image/thePartyBranch321/zanwujilu@2x.png" alt="暂无数据">
        <span>暂无数据</span>
      </div>
      <van-loading size="24px" vertical v-show="loading">加载中...</van-loading>
    </div>
</template>

<script>
import API from "@/api/api-chat-list"
import * as _ from "lodash";
import dayjs from "dayjs";
    export default {
      data(){
        return {
          theCurrentTime:null,//当前时间
          mainWorkList:[],//表格列表数据
          orgList:[],//公司组织结构
          loading:true,//数据加载中
          noData:false,//暂无数据
        }
      },
      props:['type','companyName'],
      async created(){
        //获取当前时间
        this.theCurrentTime = dayjs().add(7, 'day').format('YYYY-MM-DD');
        switch ( this.type ) {
          case 'SaveTheCompanyIssued':
            //省公司下发
            await this.getProvinceWorkList()
            break;
          case 'theAffiliatedPartyTaskList':   //直属党委任务列表
          case 'theAffiliatedPartyUnfinishedList':   //直属党委待处理任务列表
          case 'theCityListCompany':   //市公司任务列表
          case 'cityCompanyUnfinishedList':   //市公司待处理任务列表
            await this.tabularData()
            break;
        }
        this.loading = false
        this.noData = this.mainWorkList.length <= 0
      },
      methods:{
        /**
         * 支部筛选
         */
        async branchScreening(value){
          await this.$store.dispatch('thePartyBranch321/getTheBranchOfTaskData',value);
          switch ( this.type ) {
            case 'listHasBeenCompleted':   //支部任务任务列表
              this.mainWorkList = this.$store.state.thePartyBranch321.theBranchHasBeenCompleted
              break;
            case 'unfinishedList':   //支部任务未完成任务列表
              this.mainWorkList = this.$store.state.thePartyBranch321.branchUnfinished
              break;
          }
          this.loading = false
          this.noData = this.mainWorkList.length <= 0
        },
        /**
         * 筛选
         */
        async screening(){
          await this.tabularData()
          this.loading = false
          this.noData = this.mainWorkList.length <= 0
        },
        /**
         * 进入详情信息
         */
        details(type,item){
          this.$router.push({name:'TheDetailedInformation',params:{type,item}})
        },
        /**
         * 请求省公司下发数据
         */
        async getProvinceWorkList() {
          const param = {
            page: '',
            pageSize: '',
            startTime: '',
            endTime: '',
          };
          const data = await API.queryProvinceWorkList(param);
          this.mainWorkList = data.data;
        },
        /**
         * 请求直属党委和市公司任务工单列表
         */
        async tabularData() {
          const data = { param:'', }
          switch ( this.type ) {
            case 'theAffiliatedPartyTaskList':
              //直属党委任务列表
              data.param = {
                page: '',
                pageSize: '',
                readType: 'accept',
                companyName: '省公司',
                startTime: '',
                endTime: '',
              }
              break;
            case 'theAffiliatedPartyUnfinishedList':
              //直属党委待处理任务列表
              data.param = {
                readType: "todo",
                companyName: '省公司',
                startTime: '',
                endTime: '',
              };
              break;
            case 'theCityListCompany':
              //市公司任务列表
              data.param = {
                page: '',
                pageSize: '',
                readType: "accept",
                companyName: this.companyName,
                startTime: '',
                endTime: '',
              }
              break;
            case 'cityCompanyUnfinishedList':
              //市公司待处理任务列表
              data.param = {
                readType: "todo",
                companyName: this.companyName,
                startTime:'',
                endTime: '',
              };
              break;
          }
          const request = await API.queryCityWorkList(data.param);
          this.mainWorkList = request.data;
        },
      },
      filters:{
        /**
         * 组装工作子项数据
         */
        getSubWorkDescription(subWorkDescriptions) {
          if (!subWorkDescriptions) {
            return;
          }
          const arr = subWorkDescriptions.split(",").filter((item) => !_.isEmpty(item));
          return Array.from(new Set(arr)).join("；");
        },
        /**
         * 格式化暂无数据
         */
        temporarilyNoData(value) {
          return value === null ? "--" : value
        }
      }
    }
</script>

<style scoped lang="less">
@import "@/assets/css/thePartyBranch321/thePartyBranch321.less";
</style>